<template>
    <div class="loginvuex">
        <div class="loginitem">
            <div class="img">
                  <img alt="Vue logo" src="../assets/logo.png">

            </div>
            <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item  prop="username">
    <el-input prefix-icon="el-icon-user-solid" v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item  prop="password">
    <el-input prefix-icon="el-icon-s-goods"  show-password  v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
        </div>
    </div>
</template>

<script>
import { mapActions,getMenu } from "vuex";
import { routerlist } from "@/utils/routerList.js";
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password:''
        },
        // rules: {
        //   username: [
        //     { required: true, message: '请输入用户名', trigger: 'blur' },
        //     { min: 3, max: 6, message: '长度在 3 到 6个字符', trigger: 'blur' }
        //   ],
        //   password: [
        //     { required: true, message: '请输入活动名称', trigger: 'blur' },
        //     { min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur' }
        //   ],
        // }
      };
    },
    methods: {
        // 登录
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm);
            // 调用 异步操作里的方法
            this.$store.dispatch('getToken',this.ruleForm).then(res =>{
              console.log(res);
            this.$router.push("/about")
            })
            // 跳转
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // ...mapActions(["setlogins"]),

    //   重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 动态路由
      async trendsRoute(){
          let res=await getMenu()
          console.log(res);
          // 判断如果状态为200就存储左侧菜单
          if(res.meta.status==200){
            localStorage.setItem("MenuList",JSON.stringify(res.data))
            // 调用方法 传参
            let listing=routerlist(res.data)
            // 循环
            listing.forEach((item) => {
              this.$router.addRoutes("home",item)
            })
          }
      }
    }
  }
</script>
<style lang="scss" scoped>

.loginvuex{
    overflow: hidden;
    height: 100vh;
    background:#2b4b6b;
    .loginitem{
    width: 550px;
    height: 300px;
    padding:70px 13px ;
    box-sizing: border-box;
    background-color:#fff;
    border-radius: 5px;
    margin: 230px auto;
    position: relative;
      // box-shadow:0 2px 8px -2px;


    .img{
      position: absolute;
      top: -60px;
      left: 254px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: rgb(247, 246, 234);
      border: 8px solid #fff;
      box-shadow:0 2px 8px -2px;
      img{

        width: 100%;
        height: 100%;
        border-radius: 45px;
  
      }
      
    }
    }
    
}
</style>